<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./css/animate.min.css">
	<link rel="stylesheet" href="./css/animate2.min.css">
	<link rel="stylesheet" href="./css/global.css">
	<link rel="stylesheet" href="./css/swiper-bundle.min.css">
	<script src="./js/vue.min.js"></script>
	<script src="./js/jquery.min.js"></script>
	<script src="./js/wow.min2.js"></script>
	<!-- <script src="./js/swiper-bundle.min.js"></script> -->
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		:root {
			--c-color: orange;
		}

		.box1,
		.box2 {
			width: 100%;
			height: 100vh;
			background-color: var(--c-color);
		}

		.box2 {
			background-color: rgb(158, 152, 236);
		}

		.textBox1,
		.textBox2 {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* 侧边圆圈 */
		.rightDote {
			padding: 12px;
			position: fixed;
			right: 20px;
			top: 40%;
			background-color: burlywood;
		}

		.circle {
			width: 30px;
			height: 30px;
			border-radius: 15px;
			background-color: #fff;
			margin: 12px 0;
		}

		.blue {
			background-color: blue !important;
		}
	</style>
</head>

<body>
	<div class="pageBox" id="app">
		<header style="height: 70px;width: 100%;"></header>
		<div class="box1">
			<div class="textBox1 wow fadeInUp">
				方式1DFBDFvdfdbdfbfg吧v打不过
			</div>
		</div>
		<!-- 实现数据动态增加的效果 -->
		<div class="global_layout" id="layout_id">
			<div class="container">
				<h2>全球布局</h2>
				<ul>
					<li>
						<div><span class="num">{{partnerNum}}</span><span>个</span><i>+</i></div>
						<p>全球合作伙伴</p>
					</li>
					<li class="link"></li>
					<li>
						<div><span class="num">{{productNum}}</span><span>个</span><i>+</i></div>
						<p>自主品牌产品外销</p>
					</li>
					<li class="link"></li>
					<li>
						<div><span class="num">{{industryNum}}</span><span>家</span><i>+</i></div>
						<p>海内外工业企业</p>
					</li>
				</ul>
			</div>
		</div>
		<div class="box2">
			<div class="textBox2 wow slideInRight">
				方式2SDFSDFGBDF
			</div>
		</div>

		<div class="rightDote">
			<div class="circle" @click="slidMaoDian('box1')" :class="page==0?'blue':''"></div>
			<div class="circle" @click="slidMaoDian('box2')" :class="page==1?'blue':''"></div>
		</div>

		<!-- 地图定位波纹效果 -->
		<div class="global_footer">
			<img class="global_footer_bg" src="./images/global_footer_bg.jpg" alt="">
			<div class="footer_div">
				<div class="img_con">
					<img src="./images/global_img1.png" alt="">
					<div class="mg"></div>
					<div class="dg"></div>
					<div class="fl"></div>
					<div class="bj"></div>
					<div class="tj"></div>
					<div class="xm"></div>
					<div class="ad"></div>
					<div class="tg"></div>
					<div class="fz"></div>
				</div>
			</div>
		</div>
		<footer style="height: 60px;width: 100%;display: flex;align-items: center;justify-content: center;">底部栏</footer>
	</div>

	<script>
		// 监听滚动
		window.onscroll = function () {
			this.app.newIndex()
		};
		new WOW().init();
	</script>
</body>
<script src="./js/global.js"></script>

</html>